<template>
  <div>
    <h2>HomeIndex</h2>
    {{ $store.state.count }} - {{ count }}
    <button @click="count++">+</button>
    <hr>
    {{ $store.getters.cnGender }}-{{ cnGender }}-{{ $store.getters.g3 }}
    <hr>
    {{ $store.state.count }}
    <!-- <button @click="$store.state.count++">state.count++</button> -->
    <button @click="$store.commit('SET_COUNT', 10)">SET_COUNT</button>
    <hr>
    {{ $store.state.gender }}
    <button @click="$store.commit('SET_GENDER', 2)">SET_GENDER</button>

  </div>
</template>

<script>
export default {
  computed: {
    cnGender() {
      return this.$store.getters.cnGender;
    },
    count: {
      set(value) {
        this.$store.state.count = value;
      },
      get() {
        return this.$store.state.count;
      }
    }
  }
};
</script>